<template>
	<div class="flex-page-wrapper">
		<uni-nav-bar statusBar color="#fff" backgroundColor="#1E234B" title="行程提醒">
			<!-- #ifdef MP-WEIXIN -->
				<template v-slot:leftIcon>
					<div class="nav-bar-left-icon">
						<image class="img" src="https://static.inclusionconf.com/static/images/back-wx.png" mode="widthFix" />
					</div>
				</template>
			<!-- #endif -->
		</uni-nav-bar>
		<div class="flex-page">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="item" v-for="(item,index) in list" :key="index" @click="itemFn(item)">
					<image class="img" src="https://static.inclusionconf.com/static/images/chat/tips-icon1.png" mode="" mode="aspectFit" v-if="item.type == 'user'"></image>
					<image class="img" src="https://static.inclusionconf.com/static/images/chat/tips-icon2.png" mode="" mode="aspectFit" v-else></image>
					<div class="name">
						<div class="big">{{ item.name }}</div>
					</div>
					<div class="content ellipsis1">{{ item.content }}</div>
					<div class="right">{{ item.time }}</div>
					<div class="tips" v-if="item.readStatus === 0"></div>
				</view>
			</scroll-view>
		</div>
	</div>
</template>

<script>
	import protal from '@/api/protal'

	export default {
		props: {
			inner: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				showTips: true,
				list: [],
				pageNum: 1,
				total: 0
			}
		},
		onShow() {
			this.pageNum = 1
			this.getData()
		},
		methods: {
			getData() {
				const params = {
					pageNum: this.pageNum,
					pageSize: 30
				}
				protal.queryChatWindow(params).then(res => {
					this.loading = false
					if (res.code == '0000') {
						this.total = res.total
						if (this.pageNum == 1) {
							this.list = res.data
						} else {
							this.list = [...this.list, ...res.data]
						}
					}
				}).catch(err => {
					this.loading = false
				})
			},
			itemFn(item) {
				protal.messagemymyread(item.uuid).then(res => {
					if (res.code === '0000') {
						item.readStatus = 1
					}
				})
			},
			scrolltolower() {
				if (this.total && this.total > this.list.length && !this.loading) {
					this.pageNum++
					this.loading = true
					this.getData()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.flex-page-wrapper {

		.item {
			width: 694rpx;
			min-height: 87px;
			margin: 0 auto;
			overflow: hidden;
			box-sizing: border-box;
			padding-top: 20px;
			padding-left: 58px;
			padding-right: 17px;
			position: relative;
			border-bottom: 1px solid rgba(138, 142, 153, 0.2);

			.img {
				position: absolute;
				left: 0;
				top: 20px;
				width: 44px;
				height: 44px;
				border-radius: 8px;
			}

			.name {
				display: flex;
				padding-top: 5px;

				.big {
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 16px;
					color: #0A0F1A;
					line-height: 16px;
					text-align: left;
					font-style: normal;
				}
			}

			.content {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 13px;
				color: #000000;
				line-height: 13px;
				text-align: left;
				font-style: normal;
				height: 13px;
				margin-top: 5px;
			}

			.right {
				position: absolute;
				right: 14px;
				top: 24px;
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 12px;
				color: #000000;
				line-height: 12px;
				text-align: center;
				font-style: normal;
			}

			.tips {
				position: absolute;
				left: 36px;
				top: 18px;
				width: 10px;
				height: 10px;
				border-radius: 8px;
				padding: 0 2px;
				box-sizing: border-box;
				background: #FF0000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Inter, Inter;
				font-weight: 500;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 12px;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>